<template>
  <div class="chineseFood">
    <!-- <img src="http://localhost:8899/public/images/1617610038603.jpg" alt="" width="100px" height="163px"> -->
    <div class="dishContent">
      <div
        class="dishes"
        v-for="(item,index) in dishData"
        :key="item.disId"
      >
        <viewer :images="dishData">
          <img
            title="点我查看大图"
            :src="'http://localhost:8899'+ item.imgUrl"
            :alt="item.dishName"
            width="100%"
            height="163px"
            style="border-radius: 2%"
          >
        </viewer>
        <div class="dishDescription">
          <div class="dishName">
            <p style="display:inline-block">{{item.dishName}}</p>
            <el-button
              class="xiajia"
              type="primary"
              size="mini"
              @click="changeIsVaild(index)"
            >{{item.isVaild === 1 ? '下架' : '上架'}}</el-button>
          </div>
          <div class="dishPrice">
            <span class="price-now">￥{{item.presentPrice}}</span>
            <span class="price-old">￥{{item.originalPrice}}</span>
          </div>
        </div>
        <div class="buyDish">
          <el-input-number
            v-model="buyNumSelect['buyNum'+index]"
            :step="1"
            :min="0"
            @change="(currentValue, oldValue)=> buyNumChange(currentValue, oldValue,item)"
            label="描述文字"
          ></el-input-number>
          <el-button
            icon="el-icon-shopping-cart-full"
            type="primary"
            :disabled="item.isVaild === 0 ? true : false"
            @click="addBuyCar"
          >加入购物车</el-button>
        </div>
        <div class="dishButton">
          <el-button
            type="danger"
            round
            @click="seeMore(index)"
          >查看更多</el-button>
          <el-drawer
            :visible.sync="drawer"
            :with-header="false"
          >
            <div class="dishIntroduce">{{dishData[dishIndex].dishIntroduce}}</div>
          </el-drawer>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import interfaceList from '../../utils/interface'
import axios from 'axios'
export default {
  name:'chineseFoods',
  data(){
    const getBuyNum = () => {
      const buyNumSelect = {}
      for(let i = 0;i<100;i++){
        buyNumSelect['buyNum'+i] = 0
      }
      return buyNumSelect
    }
    return{
      buyNumSelect:getBuyNum(),
      dishData: [],
      drawer:false,
      dishIndex:0,
      buyCar:[],
      dishAddFlag:'',
    }
  },
  methods: {
    buyNumChange(currentValue, oldValue,item){
      // console.log(currentValue, oldValue,item)
      if(this.buyCar.length ===0){
        item.buyNum = currentValue
        this.buyCar.push(item)
      }else{
        for(let i = 0;i<this.buyCar.length;i++){
          if(this.buyCar[i].dishName === item.dishName){
            this.buyCar[i].buyNum = currentValue
            break
          }
          if(i === this.buyCar.length-1){
            item.buyNum = currentValue
            this.buyCar.push(item)
          }
        }
      }
      // console.log(this.buyCar)
    },
    addBuyCar(){
      let count = 0
      for(let i = 0; i<this.dishData.length;i++){
        count += this.buyNumSelect['buyNum'+i]
      }
      console.log(count)
      this.$store.commit('editCount',[this.mainDish,count])
      this.$store.commit('getBuyCar',[this.mainDish,this.buyCar])
    },
    getList(index){
      interfaceList.selectDishes({
        dishType:index
      }).then(res => {
        console.log(res)
        if(res.code === 200){
          this.dishData = res.dishList
        }
      })
    },
    seeMore(index){
      this.drawer = "true"
      this.dishIndex  = index
      // console.log(this.dishData[this.dishIndex].dishIntroduce)
    },
    changeIsVaild(index){
       interfaceList.getUser().then(res => {
          console.log(res)
          if (res.code === 200) {
            for (let i = 0; i < res.userName.length; i++) {
              if (res.userName[i].username === sessionStorage.getItem('loginName')) {
                this.$confirm('是否上架/上架该菜品?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  console.log(this.dishData[index])
                  this.dishData[index].isVaild = this.dishData[index].isVaild === 1 ? 0 : 1
                  interfaceList.editDish({
                    dishId:this.dishData[index].dishId,
                    dishName:this.dishData[index].dishName,
                    originalPrice:this.dishData[index].originalPrice,
                    presentPrice:this.dishData[index].presentPrice,
                    isVaild:this.dishData[index].isVaild,
                    dishType:this.dishData[index].dishType,
                    dishIntroduce:this.dishData[index].dishIntroduce
                  }).then(res =>{
                    console.log(res)
                    if(res.code === 200){
                      this.$message({
                        type: 'success',
                        message: '操作成功!'
                      })
                      this.getList(this.mainDish)
                    }
                  })
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消操作'
                  });          
                })
                break
              }
              if (i === res.userName.length - 1) {
                alert('很抱歉您没有权限操作！')
              }
            }
          }
        })
    }
  },
  // watch: {
  //   dishAddFlag: function(newVal,oldVal){
  //     console.log(newVal)
  //     this.getList(newVal)
  //   }
  // },
  created(){
    this.getList(this.mainDish)
  },
  props:['mainDish']
}
</script>

<style lang="scss" scoped>
.chineseFood {
  margin: 0;
  padding: 0;
  .dishContent {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    .dishes {
      height: 320px;
      width: 32%;
      margin: 0 1.33% 1.33% 0;
      background-color: #f0f0fa;
      border-radius: 2%;
      box-shadow: 4px 4px 2px #dcdcdc;
      img {
        cursor: pointer;
      }
      .dishDescription {
        height: 40px;
        width: 100%;
        margin-top: 5px;
        display: flex;
        .dishName {
          flex: 1;
          height: 100%;
          p {
            height: 40px;
            margin-left: 10px;
            line-height: 30px;
            color: #000000;
            font-size: 16px;
            font-family: "Roboto", sans-serif;
          }
          .el-button--primary {
            border-color: #a6a9ad;
            background-color: #a6a9ad;
          }
          .el-button--mini,
          .el-button--mini.is-round {
            padding: 1px 1px;
          }
        }
        .dishPrice {
          flex: 1;
          height: 100%;
          .price-now {
            margin-left: 30%;
            line-height: 30px;
            font-family: PingFangSC-Medium;
            font-size: 18px;
            color: #fd3f31;
          }
          .price-old {
            vertical-align: baseline;
            text-decoration: line-through;
            line-height: 20px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #9b9b9b;
          }
        }
      }
      .buyDish {
        height: 50px;
        width: 100%;
        .el-input-number {
          margin-left: 5%;
          // margin-right: 20px;
        }
        .el-button--primary {
          border-color: #ff0018;
          background-color: #ff0018;
        }
        .el-button--primary.is-disabled {
          border-color: rgba(86, 118, 210, 0.5);
          background-color: rgba(86, 118, 210, 0.5);
        }
      }
      .dishButton {
        margin-top: 5px;
        .el-button {
          width: 80%;
          position: relative;
          left: 10%;
        }
        .el-button.is-round {
          border-radius: 10px;
        }
        .el-button.is-round {
          border-color: #ff0018;
          background-color: #ff0018;
        }
        .dishIntroduce {
          margin: 20px 15px 0 25px;
          text-indent: 32px;
          font-size: 16px;
          line-height: 30px;
        }
      }
    }
    .demo-ruleForm {
      position: relative;
      top: 0;
      left: 100px;
    }
    .upload-demo {
      margin-left: 150px;
    }
  }
  .upload {
    margin: 0 0 10px 0;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    height: 300px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
}
</style>
<style>
.el-textarea__inner {
  width: 50%;
}
</style>